<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('其他配置项功能展示')}`">{{ $t('其他配置项功能展示') }}</t>
            <li>
                <span class="s-code">accept</span>可以限制上传文件的类型，其可选值可
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" target="_blank">点击查看</a>
            </li>
            <li>
                <span class="s-code">limit</span>可以限制上传文件的数量，<span class="s-code">maxSize</span>可以限制上传文件的大小，
                <span class="s-code">drag</span>可以允许文件拖拽上传，<span class="s-code">multiple</span>可以允许文件多选
            </li>
            <li>
                <span class="s-code">beforeUpload</span>是上传文件之前的钩子，你可以在这个函数中进行压缩文件、校验文件等操作
            </li>
        </template>
        <sib-item v-model="value" :props="props"></sib-item>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'upload',
            action: 'http://dev.api.sisensing.com/system/vip/card/import',
            listType: 'picture-card',
            accept: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            acceptName: 'excel 类型的文件',
            limit: 3,
            maxSize: 0.2,
            drag: true,
            multiple: true,
            headers: {
                Authorization: '123',
            },
            // eslint-disable-next-line no-unused-vars
            beforeUpload: (file) => new Promise((resolve, reject) => {
                // 校验是否为 Excel 表格文件
                const types = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
                const bool = types.includes(file.type);
                if (!bool) {
                    ElMessage.warning('只支持导入excel表格文件');
                    reject();
                    return;
                }
                // 模拟压缩文件
                const loadingInstance = ElLoading.service();
                loadingInstance.setText('压缩中...');
                setTimeout(() => {
                    loadingInstance.close();
                    reject();
                    ElMessage.warning('压缩失败');
                    // resolve(newFile);
                    // ElMessage.success('压缩成功');
                }, 2000);
            }),
            onSuccess: (res) => {
                if (res.code === 400) {
                    ElMessage.error('上传失败');
                    return;
                }
                ElMessage.success('上传成功');
            },
            onError: () => {
                ElMessage.error('上传失败');
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
</template>

<script>
import { ElMessage } from 'element-plus';
import { ElMessage, ElLoading } from 'element-plus';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'upload',
            action: 'http://dev.api.sisensing.com/system/vip/card/import',
            listType: 'picture-card',
            accept: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            acceptName: 'excel 类型的文件',
            limit: 3,
            maxSize: 0.2,
            drag: true,
            multiple: true,
            headers: {
                Authorization: '123',
            },
            beforeUpload: (file) => new Promise((resolve, reject) => {
                // 校验是否为 Excel 表格文件
                const types = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
                const bool = types.includes(file.type);
                if (!bool) {
                    ElMessage.warning('只支持导入excel表格文件');
                    reject();
                    return;
                }
                // 模拟压缩文件
                const loadingInstance = ElLoading.service();
                loadingInstance.setText('压缩中...');
                setTimeout(() => {
                    loadingInstance.close();
                    reject();
                    ElMessage.warning('压缩失败');
                    // resolve(newFile);
                    // ElMessage.success('压缩成功');
                }, 2000);
            }),
            onSuccess: (res) => {
                if (res.code === 400) {
                    ElMessage.error('上传失败');
                    return;
                }
                ElMessage.success('上传成功');
            },
            onError: () => {
                ElMessage.error('上传失败');
            },
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
